<template>
  <div>
    <Header :active="2" v-on:headerCallBack="headCall"/>

    <div class="about-content">
      <div class="banner">
        <img src="../../static/image/about-banner.png">
        <!--<div class="common-min-width">
        <div class="common-width">
          <div class="common-width" style="position: absolute; top: 0px; height: 460px ; text-align: center;line-height: 485px;">
            <h1 style="color: #6D7278;font-size: 61px;font-weight: 400;">ABOUT&nbsp;&nbsp;&nbsp;expect-X</h1>
          </div>
        </div>
        </div>-->
      </div>
      <!--公司简介-->
      <div v-if="type==1 || type==2  || type==3" class="company-desc">
        <div class="title">
          公司简介
        </div>
        <div class="common-width desc">
          <el-row>
            <el-col :span="5">
              <img src="../../static/image/logo-blank.png">
            </el-col>
            <el-col :span="19">
              <p>
                山东映湃数据科技有限公司（简称：映湃科技）于2018年5月成立，是一家以技术服务为核心的中外合资企业，是IT技术解决方案供应商，提供IT技术解决方案的咨询与创建服务。目前主要业务涵盖企业、体育、医疗及大数据服务等领域。映湃科技是由前互联网婚嫁平台简婚CEO、欧洲体育科学院（ECSS）院士、恒生银行（香港）CIO等共同发起创立，旨在为各行业数字化、数据化转型提供可靠的IT技术解决方案服务；
              </p>
              <p>
                映湃科技在面向互联网、金融、大数据及企业等领域，结合中国本土行业现状，形成拥有自主知识产权的项目执行方法论及PIMS项目执行系统，结合方法论与项目执行系统，降低项目综合风险，提高项目执行效率，实现项目过程实时监控，所有项目达到100%按时交付；
              </p>
              <p>
                映湃科技在体育领域成为欧洲SoccerLab公司大中华区唯一战略合作伙伴，SoccerLab作为全球最大的足球俱乐部软件公司，主要针对职业足球俱乐部的大数据分析管理平台，截止目前已拥有超过五十家全球顶级足球俱乐部客户，覆盖十余支欧冠球队；
              </p>
              <p>
                映湃科技在医疗领域成为上海联众公司战略合作伙伴，上海联众成立于1999年，拥有20年行业经验，已累计服务超过2000家医院客户，在医疗大数据领域拥有极高的市场占有率，DRGs绩效分析平台已覆盖八个省份，其中已有部分地区实现DRGs医保支付。
              </p>
              <p>
                映湃科技成立至今已拥有十余项软件著作权及专利，并评为2019年国家级“科技型中小企业”，与此同时为NBA、Carrier、Onetrans-act、香港机电工程署、創興保險等境外知名政企提供IT技术解决方案，也为十余家境内企业提供IT技术解决方案及运营增值服务；
              </p>

            </el-col>
          </el-row>
        </div>
      </div>

      <!--核心优势-->
      <div v-if="type==1" class="core-strengths">
        <div class="title">
          核心优势
        </div>
        <div class="common-width desc">
          <el-row>
            <el-col :span="6">
              <div class="bg_image">
                <div style="background-image: url(../../static/image/zero_bg1.png);">01</div>
              </div>
              <el-divider></el-divider>
              <div style="padding: 0px 50px">
                <div class="step-title">开发进度可视化</div>
                <div style="height: 1px;background-color: #ffffff;width: 50px;margin: auto">&nbsp;</div>
                <div class="step-desc">
                  开发进度实实时时动态展示，为您提供创新的项目进度监管服务。
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div style="padding: 0px 50px">
                <div class="step-title">阿里代码规范</div>
                <div style="height: 1px;background-color: #ffffff;width: 50px;margin: auto">&nbsp;</div>
                <div class="step-desc">
                  采用阿里巴巴代码规范促进团队合作，减少bug并降低后期维护成本。
                </div>
              </div>
              <el-divider></el-divider>
              <div class="bg_image">
                <div style="background-image: url(../../static/image/zero_bg.png);">02</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="bg_image">
                <div style="background-image: url(../../static/image/zero_bg1.png);">03</div>
              </div>
              <el-divider></el-divider>
              <div style="padding: 0px 50px">
                <div class="step-title">项目流程规范化</div>
                <div style="height: 1px;background-color: #ffffff;width: 50px;margin: auto">&nbsp;</div>
                <div class="step-desc">
                  全球无缝协作的项目开发流程。需求文档、开发文档、测试文档交付 物保障项目规范。
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div style="padding: 0px 50px">
                <div class="step-title">100%按时交付</div>
                <div style="height: 1px;background-color: #ffffff;width: 50px;margin: auto">&nbsp;</div>
                <div class="step-desc">
                  所有服务客户100%按时保质交付，保障您的idea及时呈现。
                </div>
              </div>
              <el-divider></el-divider>
              <div class="bg_image">
                <div style="background-image: url(../../static/image/zero_bg.png);">04</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <!--企业文化-->
      <div v-if="type==2" class="culture-desc">
        <div class="title">
          企业文化
        </div>
        <div class="desc">
          <div class="el-row">
            <div class="sub-desc">期待未来， 技术解决方案变革产品创建与服务方式</div>
            <div class="funnel">
              <div>
                <div class="title001">平等自由</div>
              </div>
              <div>习惯改变</div>
              <div>专业严谨</div>
              <div>团结互助</div>
              <div>诚实守信</div>
            </div>
          </div>
        </div>
      </div>

      <!--管理团队-->
      <div v-if="type==3" class="management-team">
        <div class="title">
          管理团队
        </div>
        <div class="common-width desc">
          <div class="el-row">
            <ul>
              <li>
                <div class="item">
                  <div class="fl photo"></div>
                  <div class="fr introduction">
                    <div class="real-name-label">刘春阳</div>
                    <div class="job-label">CEO</div>
                    <el-divider></el-divider>
                    <div class="intro-label" :style="{width:teamWidth+'px'}">
                      中国石油大学计算机科学学士学位。曾在美国参数技术公司（PTC）担任CSM职位，为世界顶级企业提供IT询与IT解决方案。曾在简婚（北京）科技优先担任CEO职位，运营用户超过200万，首到近30家媒体采访报道。团山东省委《影响山东·十大先锋》经济导报、山东商报、新京报等媒体多次整版报道。
                    </div>
                  </div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="fl photo"></div>
                  <div class="fr introduction">
                    <div class="real-name-label">蒋振宁</div>
                    <div class="job-label">CEO</div>
                    <el-divider></el-divider>
                    <div class="intro-label" :style="{width:teamWidth+'px'}">
                      中国石油大学计算机科学学士学位。曾在美国参数技术公司（PTC）担任CSM职位，为世界顶级企业提供IT询与IT解决方案。曾在简婚（北京）科技优先担任CEO职位，运营用户超过200万，首到近30家媒体采访报道。团山东省委《影响山东·十大先锋》经济导报、山东商报、新京报等媒体多次整版报道。
                    </div>
                  </div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="fl photo"></div>
                  <div class="fr introduction">
                    <div class="real-name-label">李剑</div>
                    <div class="job-label">CEO</div>
                    <el-divider></el-divider>
                    <div class="intro-label" :style="{width:teamWidth+'px'}">
                      中国石油大学计算机科学学士学位。曾在美国参数技术公司（PTC）担任CSM职位，为世界顶级企业提供IT询与IT解决方案。曾在简婚（北京）科技优先担任CEO职位，运营用户超过200万，首到近30家媒体采访报道。团山东省委《影响山东·十大先锋》经济导报、山东商报、新京报等媒体多次整版报道。
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!--联系我们-->
      <div v-if="type==4 || type==2 || type==3" class="about-us">
        <div class="title">
          联系我们
        </div>
        <div class="common-width desc">
          <div class="el-row">
            <div class="fl company-info">
              <div class="company-name info-item">山东映湃数据科技有限公司</div>
              <div class="company-address info-item">地址：山东省济南市高新区舜华路2000号 舜泰广场8号楼 东侧3层301C</div>
              <div class="company-phone info-item">电话：0531-89652525</div>
              <div class="company-email info-item">邮箱：info@expect-x.net</div>
              <div class="company-wechat">
                <img src="../../static/image/wechat.png">
              </div>
            </div>
            <div class="fr map">
              <div class="company-map" id="company-map">

              </div>

            </div>
          </div>
        </div>
      </div>

      <!--链接-->
      <div v-if="type==1 || type==2  || type==3" class="about-link ">
        <div class="common-width ">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="wrap">
                <div class="inner">
                  <a href="#/about/2">
                    <div class="title">企业文化</div>
                  </a>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="wrap">
                <div class="inner">
                  <a href="#/about/3">
                    <div class="title">管理团队</div>
                  </a>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="wrap">
                <div class="inner">
                  <a href="#/about/4">
                    <div class="title">联系我们</div>
                  </a>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

      </div>
    </div>
    <Footer/>
  </div>
</template>
<script>

  import Header from '@/components/Header'
  import Footer from '@/components/Footer'

  export default {
    components: {Header, Footer},
    filters: {},
    data() {
      return {
        aMap: null,
        type: undefined,
        teamWidth: 0,
        submenuLeft: 0

      }
    },
    mounted() {
      console.log(this.type)
      if (this.type !=1) {
        let aMap = new AMap.Map('company-map', {
          center: [117.14429, 36.66297],
          zoom: 20,
          lang: 'zh_cn'
        });
        let marker = new AMap.Marker({
          position: [117.14429, 36.66297],
          map: aMap
        });
        let msg_label = '山东映湃数据科技有限公司';
        marker.setLabel({
          offset: new AMap.Pixel(-60, -25), //显示位置
          content: msg_label //显示内容
        });
        marker.on("mouseout", function () {
          marker.setTop(false);
        });
      }

    },
    watch: {
      "$route": "reload"    //后面是methods中的一个方法
    },
    created() {
      this.type = this.$route.params && this.$route.params.type;
      this.teamWidth = 1250 - 266 - 129;
    },
    methods: {
      headCall(data) {
        console.log(11111111111, (data.bodyWidth - 1346) / 2)
        //this.submenuLeft = (data.bodyWidth-data.headerLeftWidth-data.headerRightWidth)/2+data.headerLeftWidth+(1260-data.headerLeftWidth-data.headerRightWidth)/2+20;
        this.submenuLeft = (data.bodyWidth - 1346) / 2 + data.headerLeftWidth + (1346 - data.headerLeftWidth - data.headerRightWidth) + 26.5
      },
      reload() {
        window.location.reload();
      },
      fetchData() {

        let _self = this;
        _self.$store.dispatch('statisticsProjectStatus', {}).then(response => {
          _self.list = response.data;
          _self.total = response.count;
        }).catch(() => {
        })
      },
    }
  }

</script>
<style>

</style>
